<!--
 * @Author: dengyl
 * @Date: 2022-01-14 17:05:32
 * @LastEditTime: 2022-08-25 17:52:23
 * @LastEditors: 詹真琦(legendryztachi@gmail.com)
 * @Description: 简约卡片2
 * @FilePath: \code\ctp-static-portal-front\src\components\tabs\components\nav.vue
-->
<template>
  <div class="nav" :class="{ isShowBtn }" :style="{ backgroundColor }">
    <div :id="id" class="swiper-container" :style="`width:${containerWidth}px`">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          :class="{ 'is-active': currentIndex === index }"
          @click="selectHandle(index)"
          v-for="(item, index) in dataList"
          :style="
            currentIndex === index && {
              backgroundColor: item.sectionData.options.sections_tabSelectedColor
            }
          "
          :key="index"
          :title="item.name"
        >
          <div class="title">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="btn" v-if="isShowBtn">
      <div
        class="vportal vp-back"
        :class="{ disabled: activeIndex === 0 }"
        @click="swiperSwitch(false)"
      ></div>
      <div
        class="vportal vp-forward"
        :class="{ disabled: isLastPage }"
        @click="swiperSwitch(true)"
      ></div>
    </div>
  </div>
</template>
<script>
  const ITEM_WIDTH = 144;
  import swiper from '@/mixins/swiper';
  export default {
    name: 'Nav',
    mixins: [swiper],
    props: {
      dataList: {
        type: Array
      },
      selectTab: {
        type: Function
      },
      contentWidth: { type: Number }
    },
    data() {
      return {
        currentIndex: 0,
        activeIndex: 0,
        id: `swiper${this._uid}`,
        isShowBtn: this.dataList.length * ITEM_WIDTH > this.contentWidth,
        backgroundColor: this.dataList[0].sectionData.options.sections_tabBgColor,
        groupNumber: 0,
        containerWidth: this.contentWidth,
        isLastPage: false
      };
    },
    created() {
      // console.log('this.dataList---------->', this.dataList);
      //如果显示右侧按钮，就减去右侧宽度在计算数量
      if (this.isShowBtn) {
        this.containerWidth -= 100;
      }
      this.groupNumber = Math.floor(this.containerWidth / ITEM_WIDTH);
    },
    mounted() {
      this.setSwiper(
        new Swiper(`#${this.id}`, {
          slidesPerView: this.groupNumber,
          slidesPerGroup: this.groupNumber,
          simulateTouch: false,
          // cssWidthAndHeight: true,
          onSlideChangeStart: (swiper) => {
            //不是第一个。并且最后一个元素是显示的。就认为他是翻到最后一页了
            this.isLastPage =
              swiper.activeIndex !== 0 &&
              swiper.getLastSlide().className.includes('swiper-slide-visible');
          },
          onSlideChangeEnd: (swiper) => {
            this.activeIndex = swiper.activeLoopIndex;
          }
        })
      );
    },
    methods: {
      /**
       * @description: 切换
       */
      selectHandle(index) {
        // this.$emit('update', index);
        this.selectTab(index);

        this.currentIndex = index;
      },
      /**
       * @description: 分页切换
       * @return {*}
       */
      swiperSwitch(isNext) {
        this._swiper[isNext ? 'swipeNext' : 'swipePrev']();
      }
    }
  };
</script>
<style scoped lang="scss">
  .nav {
    position: relative;
    height: 45px;
    overflow: hidden;
    line-height: 45px;
    border-radius: 45px;

    > .swiper-container {
      height: 45px;
      margin: 0;

      > .swiper-wrapper {
        height: 100%;

        > .swiper-slide {
          height: 100%;

          > div {
            padding-right: 10px;
            padding-left: 10px;
            overflow: hidden;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
          }

          &.is-active {
            color: #fff;
          }
        }
      }
    }

    > .btn {
      position: absolute;
      top: 0;
      right: 0;
      width: 90px;
      height: 100%;

      > div {
        float: left;
        width: 50%;
        height: 100%;
        line-height: 45px;
        text-align: center;
        cursor: pointer;

        &.disabled {
          cursor: not-allowed;
          opacity: 0.3;
        }
      }
    }
  }
</style>
